<script setup lang="ts">
import {
  MessageOutlined,
  PlusOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue';
import { Avatar, Badge, Button, Layout, Typography } from 'ant-design-vue';

const props = withDefaults(defineProps<Props>(), {
  assistant: () => ({
    id: 0,
    name: '客服助手',
    description: '智能客服，回答用户问题',
    online: true,
  }),
  showSidebar: true,
  sidebarWidth: '280px',
});
const emit = defineEmits<Emits>();
const { Header, Sider, Content } = Layout;
const { Title, Text } = Typography;

interface AssistantInfo {
  id: number;
  name: string;
  description: string;
  avatar?: string;
  online?: boolean;
}

interface Props {
  assistant?: AssistantInfo;
  showSidebar?: boolean;
  sidebarWidth?: string;
}

interface Emits {
  newChat: [];
  settings: [];
}

const handleNewChat = () => {
  emit('newChat');
};

const handleSettings = () => {
  emit('settings');
};
</script>

<template>
  <Layout class="chat-container">
    <!-- 左侧侧边栏 -->
    <Sider
      v-if="props.showSidebar"
      :width="props.sidebarWidth"
      theme="light"
      class="chat-sidebar"
    >
      <div class="sidebar-content">
        <!-- 助手信息卡片 -->
        <div class="assistant-card">
          <div class="assistant-info">
            <Badge
              :status="props.assistant.online ? 'success' : 'default'"
              :dot="true"
            >
              <Avatar :size="48" class="assistant-avatar">
                <template #icon>
                  <MessageOutlined />
                </template>
              </Avatar>
            </Badge>
            <div class="assistant-details">
              <Title :level="5" class="assistant-name">
                {{ props.assistant.name }}
              </Title>
              <Text type="secondary" class="assistant-desc">
                {{ props.assistant.description }}
              </Text>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="sidebar-actions">
          <Button
            type="primary"
            block
            @click="handleNewChat"
            class="new-chat-btn"
          >
            <PlusOutlined />
            新建会话
          </Button>
        </div>

        <!-- 侧边栏内容插槽 -->
        <div class="sidebar-slot">
          <slot name="sidebar"></slot>
        </div>
      </div>
    </Sider>

    <!-- 主内容区域 -->
    <Layout class="main-layout">
      <!-- 头部 -->
      <Header class="chat-header">
        <div class="header-content">
          <div class="header-left">
            <Title :level="5" class="header-title">
              {{ props.assistant.name }}
            </Title>
            <Badge
              :status="props.assistant.online ? 'success' : 'default'"
              :text="props.assistant.online ? '在线' : '离线'"
            />
          </div>
          <div class="header-right">
            <Button
              type="text"
              size="small"
              @click="handleSettings"
              class="settings-btn"
            >
              <SettingOutlined />
            </Button>
          </div>
        </div>
      </Header>

      <!-- 聊天内容区域 -->
      <Content class="chat-content">
        <slot></slot>
      </Content>
    </Layout>
  </Layout>
</template>

<style lang="less" scoped>
.chat-container {
  height: 100%;
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-sidebar {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;

  .sidebar-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .assistant-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  }

  .assistant-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .assistant-avatar {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    flex-shrink: 0;
  }

  .assistant-details {
    flex: 1;
    min-width: 0;
  }

  .assistant-name {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
  }

  .assistant-desc {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px;
    display: block;
    margin-top: 4px;
  }

  .sidebar-actions {
    .new-chat-btn {
      height: 40px;
      border-radius: 8px;
      font-weight: 500;
      background: #667eea;
      border-color: #667eea;

      &:hover {
        background: #5568d3;
        border-color: #5568d3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }
  }

  .sidebar-slot {
    flex: 1;
    overflow-y: auto;
  }
}

.main-layout {
  display: flex;
  flex-direction: column;
}

.chat-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 24px;
  height: 64px;
  line-height: 64px;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-title {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
  }

  .header-right {
    .settings-btn {
      color: #6b7280;

      &:hover {
        color: #667eea;
        background: #f3f4f6;
      }
    }
  }
}

.chat-content {
  flex: 1;
  background: #f9fafb;
  overflow: hidden;
  padding: 0;
}

:deep(.ant-badge-status-dot) {
  width: 8px;
  height: 8px;
}
</style>
